<template>
	<view class="container-gray" style="margin-bottom: 140upx;">
		<!-- <image class="main-img" :src="info.imgUrl"/> -->
		<video id="videoPlayer" :src="info.video" :poster="info.img" @timeupdate="timeChange" style="width: 750upx;height: 420upx;"></video>
		<view style="padding: 30upx 40upx;background: #FFFFFF;">
			<view class="course-title">{{info.title}}</view>
		</view>
		<view class="info-box">
			<view class="title">
				<image class="icon-sign" src="../../static/icon/icon-sign.png" />
				<view>简介</view>
			</view>
			<view style="font-size: 24upx;margin-left: 14upx;margin-top: 18upx;">
				<rich-text :nodes="info.content"></rich-text>
			</view>
			<view class="guidelines-box">
				<view style="color: #02A8F4;font-weight:bold;">答题须知</view>
				<view style="color: #666666;margin-top: 10upx;">&nbsp;&nbsp;&nbsp;&nbsp;主要还是因为网购的崛起，让实体产业越来越不景气了。从一开始的电商平台做起来，发展了十几二十年，现在大部分电商公司都有一定的影响力了，其中最为出名的就是阿里巴巴跟京东了。</view>
			</view>

			<view class="btn-box">
				<button type="primary" class="btn-shadow" style="background: #02A8F4;" @click="goTrainAnswer">我要答题</button>
				<button type="default" class="btn-shadow" style="color: #02A8F4;" @click="selectPerformance">查看完成情况</button>
			</view>

			<view>
				<view class="title">
					<image class="icon-sign" src="../../static/icon/icon-sign.png" />
					<view>评论</view>
				</view>
				<view v-if="comment.length>0">
					<view v-for="(item,index) in comment" :key="index" style="margin: 20upx 10upx;border-bottom: 1px solid #DEE2ED;padding-bottom: 20upx;">
						<view style="display: flex;">
							<image :src="item.headUrl" style="width: 80upx;height: 80upx;border-radius: 50%;border: 1px solid #DEE2ED;" />
							<view style="margin-left: 10upx;">
								<view style="font-size:28upx;color: #222222;">{{item.realName}}</view>
								<view style="font-size: 20upx; color: #999999;margin-top: 10upx;">{{item.createTime}}</view>
							</view>
						</view>
						<view style="margin-top: 20upx;">{{item.content}}</view>
					</view>
				</view>
				<view v-else style="text-align: center;margin-top: 20upx;font-size: 24upx;color: #999999;">快来评论吧</view>
			</view>
		</view>

		<view class="footer flex-box">
			<input class="comment-input" v-model="value" placeholder="我也说几句" />
			<button type="primary" class="primary post-btn" @click="makeComments">发表</button>
			<image class="footer-icon" src="../../static/icon/icon-share-blue.png" @click="openShare()" />
			<image class="footer-icon" :src="isCollect?'../../static/icon/icon-collect-active.png':'../../static/icon/icon-collect.png'"
			 @click="collect" />
		</view>

		<sheet :isFiexd="isFiexd" :topLocation="topLocation" @close="isFiexd = false">
			<view style="color: #828282;font-size:24upx;line-height: 100upx;text-align: center;">分享到</view>
			<view style="display: flex;font-size:22upx;color: #828282;justify-content: space-between;padding: 10upx 50upx;">
				<view class="share-box" @click="shareSpace()">
					<image class="share-icon" src="../../static/icon/share-space.png" />
					<view>QQ空间</view>
				</view>
				<view class="share-box" @click="shareWechat()">
					<image class="share-icon" src="../../static/icon/share-wechat.png" />
					<view>微信好友</view>
				</view>
				<view class="share-box" @click="shareFriends()">
					<image class="share-icon" src="../../static/icon/share-friends.png" />
					<view>微信朋友圈</view>
				</view>
				<view class="share-box" @click="shareQQ()">
					<image class="share-icon" src="../../static/icon/share-qq.png" />
					<view>QQ好友</view>
				</view>
			</view>
		</sheet>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		richText,
		setNavTitle
	} from '../../common/common'

	export default {
		data() {
			return {
				trainId: '',
				info: {},
				comment: [],
				isCollect: false,
				isApply: false,
				value: '',
				collectId: '',
				isFiexd: false,
				watchedProgress: 0,
				topLocation: '78%'
			}
		},
		onLoad(options) {
			this.trainId = options.id
			this.getDetail()
		},
		onBackPress() {
			this.saveTrainDate()
		},
		onHide() {
			this.saveTrainDate()
		},
		methods: {
			getDetail() {
				const params = {
					trainId: this.trainId
				}
				post_md5('/train/getTrainDataInfoById', params).then(res => {
					this.info = res.data.trainDataInfo
					this.info.content = richText(res.data.trainDataInfo.content)
					this.comment = res.data.commentList
					setNavTitle(this.info.title)
					this.selectCollect()
				})
			},

			makeComments() {
				const params = {
					userId: uni.getStorageSync('userId'),
					trainId: this.trainId,
					content: this.value,
					trainType: 2
				}
				post_md5('/train/trainCommentByUserId', params).then(res => {
					this.value = ''
					if (res.data) {
						uni.showToast({
							title: '评价已提交，请等待后台审核',
							icon: 'none'
						})
					}
				})
			},

			timeChange(e) {
				this.watchedProgress = Math.ceil(
					(e.detail.currentTime / e.detail.duration) * 100
				)
			},

			// 生成学习记录
			saveTrainDate() {
				const params = {
					userId: uni.getStorageSync('userId'),
					trainDataId: this.trainId,
					trainDataType: 1,
					watchedProgress: this.watchedProgress
				}
				post_md5('/user/saveUserTrainDate', params, false)
			},

			// 查询收藏信息
			selectCollect() {
				const params = {
					type: 2,
					userId: uni.getStorageSync('userId'),
					idInfo: this.trainId
				}
				post_md5('/user/isCollect', params, false).then(res => {
					if (res.data == -1) {
						this.isCollect = false
					} else {
						this.isCollect = true
						this.collectId = res.data
					}
				})
			},

			// 收藏
			collect() {
				if (this.isCollect == true) {
					const params = {
						id: this.collectId
					}
					post_md5('/user/cancelColl', params).then(res => {
						this.isCollect = false
						this.collectId = ''
						this.count++
						uni.showToast({
								title: '取消收藏',
								icon: 'none'
							},
							500
						)
					})
				} else {
					const params = {
						type: 2,
						userId: uni.getStorageSync('userId'),
						idInfo: this.trainId
					}
					post_md5('/user/collectInfo', params, fale).then(res => {
						this.isCollect = true
						this.collectId = res.data
						this.count++
						uni.showToast({
								title: '收藏成功',
								icon: 'none'
							},
							500
						)
					})
				}
			},

			openShare() {
				this.isFiexd = true
			},

			// 分享到QQ空间
			shareSpace() {
				var params = '/pages/train/detail?trainId=' + this.trainId
				uni.share({
					provider: 'qq',
					type: 0,
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.info.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享给微信好友
			shareWechat() {
				var params = '/pages/train/detail?trainId=' + this.trainId
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.info.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享到朋友圈
			shareFriends() {
				var params = '/pages/train/detail?trainId=' + this.trainId
				uni.share({
					provider: 'weixin',
					scene: 'WXSenceTimeline',
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.info.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享给QQ好友
			shareQQ() {
				var params = '/pages/train/detail?trainId=' + this.trainId
				uni.share({
					provider: 'qq',
					type: 0,
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.info.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 我要答题
			goTrainAnswer() {
				uni.navigateTo({
					url: 'train-topic?id=' + this.trainId
				})
			},

			// 查看完成情况
			selectPerformance() {
				uni.navigateTo({
					url: 'performance?id=' + this.trainId
				})
			}
		}
	}
</script>

<style>
	.main-img {
		width: 750upx;
		height: 420upx;
	}

	.course-title {
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
	}

	.time-place-info {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		margin-top: 20upx;
	}

	.info-box {
		margin-top: 1px;
		background: #ffffff;
		padding: 22upx 26upx;
	}

	.icon {
		width: 36upx;
		height: 30upx;
		margin-right: 12upx;
	}

	.solid-icon {
		width: 24upx;
		height: 24upx;
		margin-right: 10upx;
	}

	.icon-sign {
		width: 4upx;
		height: 20upx;
		margin-right: 12upx;
	}

	.title {
		display: flex;
		align-items: center;
		font-size: 26upx;
		font-weight: bold;
		color: #333333;
	}

	.footer {
		background: #f5f5f5;
		padding: 0 40upx;
		height: 120upx;
		width: 670upx;
	}

	.footer-icon {
		width: 44upx;
		height: 44upx;
	}

	.comment-input {
		width: 312upx;
		height: 60upx;
		background: #ffffff;
		border-radius: 30upx;
		/* color: #999999; */
		font-size: 26upx;
		line-height: 60upx;
		padding: 0 20upx;
	}

	.post-btn {
		width: 120upx;
		height: 60upx;
		border-radius: 30upx;
		font-size: 26upx;
		margin: 0;
	}

	.share-box {
		width: 120upx;
		text-align: center;
		line-height: 40upx;
	}

	.share-icon {
		width: 76upx;
		height: 76upx;
	}

	.guidelines-box {
		border: 1px solid #02a8f4;
		border-radius: 20upx;
		padding: 20upx;
		font-size: 24upx;
		margin-top: 30upx;
	}

	.btn-box {
		margin: 20upx;
		border-bottom: 1px solid #dee2ed;
		padding-top: 1upx;
		padding-bottom: 40upx;
	}

	.btn-shadow {
		font-size: 30upx;
		box-shadow: 0px 8upx 16upx 0px rgba(2, 168, 244, 0.24);
		height: 80upx;
		margin-top: 22upx;
		border-radius: 20upx;
		border: 1px solid #02a8f4;
	}
</style>
